<template>
  <div class="search" v-bind="$attrs" v-on="$listeners">
    <div class="search-area">
      <div class="search-area-left">
        <slot></slot>

        <template v-if="isMoreSearch">
          <div v-show="isExpend" class="more-search-area">
            <!-- 使用具名插槽,不适用插槽组遍历-->
            <slot name="moreSearch"></slot>
          </div>
        </template>
      </div>
      <div class="search-area-right">
        <!-- 更多 -->
        <el-button
          v-if="isMoreSearch"
          type="primary"
          :size="size"
          :icon="isExpend ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          @click="handleExpend"
          >{{ isExpend ? '收起' : '展开' }}</el-button
        >
        <!-- 查询和重置按钮 -->

        <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh-left" type="default" @click="handleReset">重置</el-button>

        <!-- 使用具名插槽,不适用插槽组遍历-->
        <slot name="btns"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  name: 'GSearch',
  props: {
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 是否有更多搜索
    isMoreSearch: {
      type: Boolean,
      default: false
    },

    // isExpend: {
    //   type: Boolean,
    //   default: true // 默认关闭
    // },

  },
  data() {
    return {
      isExpend: false,
    }
  },

  methods: {
    // ** ---------- query ---------- **

    handleExpend() {
      this.isExpend = !this.isExpend
    },

    handleQuery(reset = false) {
      this.$emit('query-params', this.queryParams , reset)
    },
    handleReset() {
      for (let key in this.queryParams) {
        this.queryParams[key] = this.resetTypeInitValue(
          this.getType(this.queryParams[key])
        )
      }
  
      this.handleQuery(true)
    },

    getType(variable) {
      return Object.prototype.toString.call(variable).slice(8, -1)
    },

    resetTypeInitValue(type) {
      let initVal
      switch (type) {
        case 'String':
          initVal = ''
          break

        case 'Number':
        case 'Undefined':
          initVal = undefined
          break
        case 'Boolean':
          initVal = false
          break
        case 'Array':
          initVal = []
          break
        case 'Object':
          break
        default:
          initVal = null
          break
      }

      return initVal
    }

    // ** ---------- query End---------- **
  }
}
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  flex-direction: column;
  margin: 8px 0;

  .search-area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    &-left {
      // flex: 1;

      width: 80%;
      ::v-deep .el-select {
        width: 100% !important;
      }

      ::v-deep .el-input,
      .el-date-editor {
        width: 100%;
      }
    }

    &-right {
      width: 20%;
      text-align: right;
    }
  }

  .more-search-area {
    margin-top: 6px;
    // padding: 6px;
    // background: #f2f6fc;
    // border-radius: 4px;
  }

  button + button {
    margin-left: 8px;
  }
}
</style>
